<template>
  <zm-view ref="view">
    <zm-list ref="list" :options="options" @query="handleQuery">
      <vew v-for="(item, index) in list" :key="index" class="flex items-center justify-between p-24 mx-24 mt-24 radius-16 bg-white">
        <view class="flex flex-col mr-24">
          <text class="font-30 font-bold text-row-1">{{ item.title }}</text>
          <text class="text-666 mt-10">{{ item.orderTime }}</text>
        </view>
        <text class="font-32 font-bold" :style="[cardPointStyle(item)]">{{ cardPoint(item) | formatDigit({ trimZero: false }) }}</text>
      </vew>
    </zm-list>
  </zm-view>
</template>
<script>
import page from "@/mixins/page"
export default {
  components: {},
  mixins: [page],
  data() {
    return {
      cardCode: "",
      list: [],
      options: {
        emptyText: "暂无消费记录"
      }
    }
  },
  computed: {
    cardPoint() {
      return (item) => {
        return String(item.cardPoint)?.indexOf("-") >= 0 ? item.cardPoint : "+" + uni.$formatDigit(item.cardPoint, { trimZero: false })
      }
    },
    cardPointStyle() {
      return (item) => {
        return {
          color: String(item.cardPoint)?.indexOf("-") >= 0 ? "#333333" : "#DE281A"
        }
      }
    }
  },
  onLoad(options) {
    this.cardCode = options.cardCode
  },
  methods: {
    async handleQuery({ type, page, pageSize, fail, success }) {
      try {
        const res = await uni.$api.card.getSpendingHistory({ page, pageSize, cardCode: this.cardCode })
        this.list = type == "load" ? [...this.list, ...res.list] : res.list
        success({ list: res.list, total: res.count })
      } catch (e) {
        fail()
      }
    }
  }
}
</script>
<style scoped lang="scss"></style>
